<template>
  <TabHead/>
  <div class="md">
    <md-editor 
        v-model="state.form.content"
        @on-save="onSave"
        @upload-image="handleUploadImage"
    />
  </div>
</template>

<script setup>
import TabHead from "../components/TabHead.vue";
import {getCurrentInstance, reactive, ref} from "vue";
import MdEditor from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import request from "../request.js";
import {useRouter, useRoute} from "vue-router";
import {ElMessage} from "element-plus";

//获取传来的id
const route = useRoute();
const ID = route.params.id;

//统一管理变量
const state = reactive({
  form: {
    id: ID,
  }
})

//加载模块
const load = () => {
  request.get("/article/findAll").then(res => {
    for (const resKey of res) {
      //根据id查找对应文章
      if(resKey.id==ID){
        state.form.content = resKey.content
      }
    }

  })
}
load()


//保存模块
const onSave = () => {
  request.put("/article/updateById",state.form).then((res)=>{
    if(res === true){
      ElMessage.success('保存成功')
    }else{
      ElMessage.error('保存失败')
    }
  })
}

</script>

<style scoped>
.md {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 70px;
  left: 0;
}
</style>

